<template>
  <div>
      <section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-custom">
			<div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.index')}}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">{{$t('m.home')}} <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.shop')}} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.pages')}}  </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.homepage')}}</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">{{$t('m.catalog')}}</a>
								<a class="dropdown-item" href="item.html">{{$t('m.item detail')}}</a>
								<a class="dropdown-item" href="cart.html">{{$t('m.cart')}}</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">{{$t('m.contact')}}</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.contact')}}</a></li>
					<li class="nav-item dropdown">
						<!-- 搜索功能 -->
						<Search @search='search' v-model="text" ></Search>
						<!-- <input type="text" /> -->
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.cart')}}<i class="fas fa-shopping-cart"></i><span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
			</div>
			<div v-if="username==''">
				<router-link to='/login'>{{$t('m.login')}}</router-link>
				/
				<router-link to='/register'>{{$t('m.register')}}</router-link>
			</div>
			<div v-else>
				<p><a href="/myprofile"><Avatar :src="src" wifth="150" fit="fill"></Avatar></a>
					<Button v-if="type==2" @click="to_admin">管理员控制台</Button>
				</p>
				<p>{{$t('m.welcome')}}&nbsp;<a href="/myprofile">{{username}}</a></p>&emsp;&emsp;&emsp;
				<div float="left">
					<Button color="blue" @click="logout">{{$t('m.logout')}}</Button>
					<Button color="blue" @click="update">{{$t('m.update')}}</Button>
				</div>
			</div>
		</nav>
			<div>
				<button @click="style_button" id="_dark-mode" class="nav-btn no-hover fl" >
					<i class="adjust icon"></i>
				</button>
				<!-- 开关标签 -->
				<h-switch v-model="lang" @change="lang_change">{{$t('m.chinese')}}/{{$t('m.english')}}</h-switch>
			</div>
	</section>
	
  </div>
</template>

<script>
import redis from 'redis'
export default {
	data(){
		return{
			//关键词变量
			text:'',
			username:"",
			src:'',
			//开关变量
			lang:0,
			light_dark:1,
			type:localStorage.getItem('type')
		}
	},
	//监听属性，监测页面变化
	watch:{
		$route(to,from){
			//手动刷新
			this.$router.go(0);
		}
	},
	mounted:function(){
		this.now_back()
		this.change_back()
		this.if_lang()
		this.another_login()
		// 判断是否有username
		var uname=localStorage.getItem('username')
		if (uname==null){
			this.username=""
		}else{
			this.username=uname
			this.get_avatar()
		}
		
	},
	created(){
	},
	methods:{
		search(){
			//跳转
			localStorage.setItem('text',this.text)
			// this.$router.push({path:'/search'})
			this.$router.push({path:'/search',query:{text:this.text}})
		},
		to_admin(){
			this.$router.push('/admin')
		},
		//判断当前时间
		now_back(){
			var myDate = new Date();
			var hours=myDate.getHours();       //获取当前小时数(0-23)
			console.log(hours)
			//判断当前时间小于18 大于7
			if(hours<18 & hours>7){
				//白天
				this.light_dark=1
			}else{
				this.light_dark=0
			}
		},
		//判断背景
		change_back(){
			var styles = getComputedStyle(document.documentElement)
			if(this.light_dark==0){
				//0 是黑夜模式
				document.documentElement.style.setProperty('--bg-color','#292a2d')
				document.documentElement.style.setProperty('--a-color','white')
				document.documentElement.style.setProperty('--text-color','#d3d3d3')
			}else{
				//1 白天模式
				document.documentElement.style.setProperty('--bg-color','#ffff')
				document.documentElement.style.setProperty('--a-color','black')
				document.documentElement.style.setProperty('--text-color','#444342')
			}
		},
		//切换背景颜色
		style_button(){
			//获取样式表
			var styles = getComputedStyle(document.documentElement)
			if(this.light_dark==1){
				//0 是黑夜模式
				this.light_dark=0
				this.change_back()
			}else{
				//1 白天模式
				this.light_dark=1
				this.change_back()
			}
			console.log(this.light_dark)
		},
		//判断语言
		if_lang(){
			// 获取存储的语言
			var lang_locale = localStorage.getItem('lang')
			if(lang_locale){
				// 语言赋值
				this.$i18n.locale = lang_locale
				if(lang_locale=='zh'){
					//语言变量
					this.lang=0
				}else{
					this.lang=1
				}
			}else{
				this.$i18n.locale = 'zh'
			}
		},
		//切换语言
		lang_change(){
			console.log(this.lang)
			if(this.lang==false){
				this.$i18n.locale = 'zh'
				localStorage.setItem('lang','zh')
			}else{
				this.$i18n.locale = 'en'
				localStorage.setItem('lang','en')
			}
		},
		get_avatar() {
		var uid = localStorage.getItem("uid");
		var myjwt = localStorage.getItem("jwt");
		this.axios.get("http://127.0.0.1:8000/myapp/upload/", {
			params: { 'uid': uid,'jwt':myjwt }
			}).then(result => {
				if(result.data.code==200){
					if(result.data.filename=='user.png'){
						this.src ="http://127.0.0.1:8000/static/upload/" + result.data.filename;
					}else{
						this.src ="http://mdsave.test.upcdn.net/" + result.data.filename;
					}
				}else{
					this.$Message(result.data.msg);
					localStorage.removeItem('username')
					localStorage.removeItem('uid')
					localStorage.removeItem('jwt')
              		setTimeout("window.location.href='/login'",6);

				}

			});
		},
		another_login(){
			var another_id = this.$route.query.another_id;
			var user_id = this.$route.query.uid;
			if (another_id){
				// 自动帮用户登录
				localStorage.setItem('username',another_id)
				localStorage.setItem('uid',user_id)
			}
		},
		logout(){
			localStorage.removeItem('username')
			localStorage.removeItem('uid')
			localStorage.removeItem('jwt')
			this.username=""
			window.location.href='http://localhost:8080/'
		},	
		update(){
			this.$router.push({name:'Update'})
		}
	}
}
</script>

<style>

</style>